<!DOCTYPE html>
<html ng-app ng-controller="FireWall">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>564 Firewall Rules UI</title>
    <link href="bootstrap.css" rel="stylesheet">
	<link href="jquery.jqplot.min.css" rel="stylesheet">
</head>

<body class="preview" id="top">
<div class="container">
    <header class="jumbotron subhead" id="overview">
        <div class="row">
            <div class="span6">
                <h1>564 FireWall Rules UI</h1>
            </div>
        </div>
    </header>
    <div class="row">
		<ul class="nav nav-tabs">
            <li class="active"><a href="#stat" data-toggle="tab">Show Stats</a></li>
			<li><a href="#rulesedit" data-toggle="tab">Eidt Rules</a></li>
        </ul>
	</div>
	<div class="tabbable">
		<div class="tab-content">
			<div class="tab-pane active" id="stat">
				<div class="row">
					<div class="span5">
						<pre>{{log}}</pre>
					</div>
					<div class="span7">
						<div id="chart" style="height:300px; width:500px;"></div>
					</div>
				</div>
			</div>
			<div class="tab-pane" id="rulesedit">
				<div class="row">
					<form class="span6 form-horizontal" id="form">
						<div class="control-group">
							<label class="control-label">UID: </label>
							<div class="controls"><input type="text" class="input-medium" ng-model="tmpRule.uid"></div>
						</div>
						<div class="control-group">
							<label class="control-label">Comment: </label>
							<div class="controls"><input type="text" class="input-medium" ng-model="tmpRule.coment"></div>
						</div>
						<div class="control-group">
							<label class="control-label">Protocol: </label>
							<div class="controls"><input type="text" class="input-medium" ng-model="tmpRule.proto"></div>
						</div>
						<div class="control-group">
							<label class="control-label">IP Version:</label>
							<div class="controls"><input type="text" class="input-medium" ng-model="tmpRule.ipv"></div>
						</div>
						<div class="control-group">
							<label class="control-label">Source IP:</label>
							<div class="controls"><input type="text" class="input-medium" ng-model="tmpRule.srcip"></div>
						</div>
						<div class="control-group">
							<label class="control-label">Source Port:</label>
							<div class="controls"><input type="text" class="input-medium" ng-model="tmpRule.srcport"></div>
						</div>
						<div class="control-group">
							<label class="control-label">Destination IP:</label>
							<div class="controls"><input type="text" class="input-medium" ng-model="tmpRule.dstip"></div>
						</div>
						<div class="control-group">
							<label class="control-label">Destination Port:</label>
							<div class="controls"><input type="text" class="input-medium" ng-model="tmpRule.dstport"></div>
						</div>
						<div class="control-group">
							<label class="control-label">Action:</label>
							<div class="controls"><input type="text" class="input-medium" ng-model="tmpRule.action"></div>
						</div>
						<div class="control-group">
							<label class="control-label">Log:</label>
							<div class="controls"><input type="text" class="input-medium" ng-model="tmpRule.log"></div>
						</div>
						<div class="control-group">
							<div class="controls">[ <a href="#" ng-click="tmpAddRule()">Add This Rule</a> ]</div>
						</div>
					</form>
					<br/>
					<div class="span6">
						<pre>
&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
&lt;!DOCTYPE fwrules SYSTEM "fwrules.dtd"&gt;
&lt;fwrules&gt;<ANY ng-repeat="rule in fwrules">
&lt;rule&gt;
	&lt;uid&gt;{{rule.uid}}&lt;/uid&gt;
	&lt;coment&gt;{{rule.coment}}&lt;/coment&gt;
	&lt;proto&gt;{{rule.proto}}&lt;/proto&gt;
	&lt;ipv&gt;{{rule.ipv}}&lt;/ipv&gt;
	&lt;srcip&gt;{{rule.srcip}}&lt;/srcip&gt;
	&lt;srcport&gt;{{rule.srcport}}&lt;/srcport&gt;
	&lt;dstip&gt;{{rule.dstip}}&lt;/dstip&gt;
	&lt;dstport&gt;{{rule.dstport}}&lt;/dstport&gt;
	&lt;action&gt;{{rule.action}}&lt;/action&gt;
	&lt;log&gt;{{rule.log}}&lt;/log&gt;
&lt;/rule&gt;</ANY>
&lt;/fwrules&gt;			
						</pre>
					</div>
				</div>
			</div>		
		</div>
	</div>
</div>
</body>
<script src="jquery.min.js"></script>
<script src="jquery.jqplot.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="angular.min.js"></script>

<script src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="plugins/jqplot.barRenderer.min.js"></script>
<script src="plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script src="fw.js"></script>
</html>